<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>选择商品（允许修改发货数量）</title>
    <link rel="stylesheet" href="/layui/css/layui.css">

    <script src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript" src="/js/hy.js"></script>
</head>
<body>

<div class="" style="padding:15px;">
   
    <!-- content starts -->


        <fieldset class="layui-elem-field">
            <legend>选择商品（允许修改发货数量）<span style="color: red">[[${msg}]]</span></legend>
            <div class="layui-field-box">
                <form class="layui-form layui-form-pane1" method="get" >
                    <input type="hidden" name="orderItemId" id="orderItemId" th:value="${orderItemId}"/>
                    <input type="hidden" name="shopId"  th:value="${shopId}"/>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="number" autocomplete="off"
                                   th:value="${number}" placeholder="输入商品编码搜索">
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn">搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
    <!--<form class="layui-form layui-form-pane1" method="post">-->
    <table class="layui-table" lay-even lay-skin="row">
        <thead>
        <tr>
            <th width="55px"></th>
            <th>商品</th>
        
            <th>发货数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${lists}">
    
            <td width="55px">
                <img th:src="${item.image}" class="pimg" th:if="${#strings.isEmpty(item.image) == false}"
                     style="float: left; width: 50px;">
            </td>

            <td >
                <!-- <p  th:text="${item.name}" style="color:#ababae;size: 12px;"></p> -->
                <p style="color:#ababae;size: 12px;">
                    <span th:text="${item.goodsNumber}" ></span>&nbsp;--&nbsp;
                    <span th:text="${item.colorValue}"></span>
                    <span th:text="${item.styleValue}"></span>
                    <span th:text="${item.sizeValue}"></span>
                </p>
                <p th:text="${item.specNumber}"></p>
            </td>

            <td class="orderItemQty"> <input type="number" th:value="${orderItemQty}" class="layui-input " style="width: 40px" /></td>
            <td>
                <a class="link_to" th:if="${goodsSpecNum.equals(item.specNumber)==false}" th:attr="goods-id=${item.goodsId},spec-id=${item.id}" style="color: #0000FF">选择并修改</a>
                <a th:if="${goodsSpecNum.equals(item.specNumber)}" style="color: #a2f6b6">选中</a>
            </td>

        </tr>
        </tbody>
    </table>
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>


    <script type="text/javascript">
        
        $(function () {
            $(".pimg").click(function(){
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });

            function imgShow(outerdiv, innerdiv, bigimg, _this){
                var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                $(bigimg).attr("src", src);//设置#bigimg元素的src属性

                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function(){
                    var windowW = $(window).width();//获取当前窗口宽度
                    var windowH = $(window).height();//获取当前窗口高度
                    var realWidth = this.width;//获取图片真实宽度
                    var realHeight = this.height;//获取图片真实高度
                    var imgWidth, imgHeight;
                    var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                    if(realHeight>windowH*scale) {//判断图片高度
                        imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                        imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                        if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                            imgWidth = windowW*scale;//再对宽度进行缩放
                        }
                    } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                        imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                    } else {//如果图片真实高度和宽度都符合要求，高宽不变
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

                    var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                    $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                });

                $(outerdiv).click(function(){//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }
            //$('table tr:not(:first)').remove();
            // var len = $('table tr').length;
            // for (var i = 1; i < len; i++) {
            //     $('table tr:eq(' + i + ') td:first').text(i);
            // }
            $(".link_to").click(function () {
                var orderItemId = '[[${orderItemId}]]';
                var erpGoodSpecId = $(this).attr("spec-id");
                var quantity = $(this).parent().siblings(".orderItemQty").children("input").val();

                //alert(JSON.stringify(data));
                if(quantity==''||quantity<=0){
                    alert("请填写数量")
                    return;
                }
                if(confirm("商品只能补充一次，是否确定选择该商品？")) {
                    var data={orderItemId: orderItemId, erpGoodSpecId: erpGoodSpecId,quantity:quantity,shopId:[[${shopId}]]};
                    $.ajax({
                        url: "/ajax_order_item_edit/upd_erp_sales_order_spec",
                        type: "POST",
                        dataType: "JSON",
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function (res) {
                            if (res.code == 0) {
                                window.parent.location.reload();
                            } else {
                                alert(res.msg);
                            }
                        }
                    })
                }
            })
        });



    </script>
</div>
</body>
<html>
